<template>
  <div class="page-header-index-wide">
    <a-card :body-style="{ padding: 0 }">
      <div class="ant-pro-table-toolbar">
        <div class="ant-pro-table-toolbar-title"></div>
        <div class="ant-pro-table-toolbar-option">
          <div class="ant-pro-table-toolbar-item">
            <a-button v-action:CreateGenConf type="primary" icon="plus" :loading="loading" @click="visible = true">新建</a-button>
          </div>
          <template v-if="selectedRows.length">
            <div class="ant-pro-table-toolbar-item">
              <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="remove"><a-icon type="delete" />批量删除</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
              </a-dropdown>
            </div>
          </template>
          <a-divider type="vertical" />
          <span class="ant-pro-table-toolbar-item-icon">
            <a-tooltip placement="top">
              <template slot="title">
                <span>刷新</span>
              </template>
              <a-icon type="reload" @click="refreshTable()"/>
            </a-tooltip>
          </span>
        </div>
      </div>

      <s-table
        ref="table"
        size="default"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :showPagination="true"
      >
        <template slot="tools" slot-scope="row">
          <a v-action:UpdateGenConf @click="showModal(row)">字段</a>
          <a-divider type="vertical" />
          <a v-action:DeleteGenConf @click="showModal(row)">生成</a>
          <a-divider type="vertical" />
          <a v-action:DeleteGenConf @click="showModal2(row)">设计</a>
        </template>
      </s-table>

      <GenConfForm ref="genConfForm" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" @submit="handleSubmit"/>
    </a-card>
  </div>
</template>
<script>
import { STable } from '@/components'
import GenConfForm from './components/GenConfForm'
import { fetchAllGenConf, createGenConf, updateGenConf, deleteGenConf } from '@/api/gen-conf'
const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`
  },
  {
    title: '表名称',
    dataIndex: 'tableName'
  },
  {
    title: '表注释',
    dataIndex: 'tableComment'
  },
  {
    title: '表编码',
    dataIndex: 'tableCollation'
  },
  {
    title: '数据库引擎',
    dataIndex: 'ENGINE'
  },
  {
    title: '创建时间',
    dataIndex: 'createDate'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'tools' }
  }
]
export default {
  name: 'Generator',
  data () {
    return {
      description: '',
      loading: false,
      visible: false,
      confirmLoading: false,
      visible2: false,
      confirmLoading2: false,
      selected: 0,
      columns,
      queryParam: {},
      loadData: parameter => {
        return fetchAllGenConf(Object.assign(parameter, this.queryParam)).then(res => {
          debugger
          return res.result
        })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  components: { STable, GenConfForm },
  methods: {
    showModal (row) {
      this.visible = true
      const form = this.$refs.genConfForm.form
      this.$nextTick(() => {
        form.setFieldsValue({
          tableName: row.tableName,
          packageName: row.packageName,
          comments: row.tableComment
        })
      })
    },
    showModal2 (row) {
      this.visible2 = true
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleMenuClick () {},
    handleSubmit () {
      const form = this.$refs.genConfForm.form
      form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const promise = this.selected === 0 ? createGenConf(values) : updateGenConf(this.selected, values)
          const hide = this.$message.loading('执行中..', 0)
          promise.then(res => {
            this.$message.success(this.selected === 0 ? '添加成功！' : '更新成功！')
            this.refreshTable()
            this.handleCancel()
          }).finally(() => {
            hide()
            this.confirmLoading = false
          })
        }
      })
    },
    refreshTable () {
      this.$refs.table.refresh()
    },
    handleCancel () {
      this.visible = false
      this.selected = 0
      this.$refs.genConfForm.form.resetFields()
    },
    showDeleteConfirm (id) {
      this.$confirm({
        title: '确定删除此数据源吗?',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('删除中..', 0)
          deleteGenConf(id).then(res => {
            this.$message.success('删除成功！')
            this.refreshTable()
          }).finally(() => {
            hide()
          })
        }
      })
    }
  }
}
</script>
